<template>
	<view class="page-container">
		<!-- 客户基本信息区 -->
		<view class="info-card">
			<view class="info-header">
				<text class="customer-name">{{merch.title}}</text>
				<uni-icons type="" size="24px" color="#666" class="edit-icon"></uni-icons>
			</view>

			<view class="info-item">
				<uni-icons type="phone" size="14px" color="#666"></uni-icons>
				<text class="info-label">联系电话：</text>
				<text class="info-value" @click="makePhoneCall">{{merch.mobile}}</text>
			</view>

			<view class="info-item">
				<uni-icons type="location" size="14px" color="#666"></uni-icons>
				<text class="info-label">详细地址：</text>
				<text class="info-value">{{merch.address}}</text>
			</view>

			<view class="intent-level">
				<text class="level-label">意向等级：</text>
				<view class="level-tags">
					<text v-for="level in intentLevels" @click="setlevel" :data-id="level.id"  class="level-tag" :class="{'active': merch.merchtype_id == level.id}">
						{{ level.name }}
					</text>
				</view>
			</view>
		</view>

		<!-- 跟进记录区 -->
		<view class="follow-up-card">
			<view class="section-header">
				<view>
					<text class="section-title">跟进记录</text>
				</view>
				<view>
					<button type="primary" size="mini" v-if="showAddFollowUp!=1" @click="showAddFollowUp1">
						新增跟进
					</button>
					
					
					<button type="primary" size="mini" v-if="showAddFollowUp==1" @click="showAddFollowUp0">
						取消
					</button>
				</view>
			</view>

			<!-- 新增跟进输入框 -->
			<view class="add-follow-up" v-if="showAddFollowUp" >
				<textarea  placeholder="请输入跟进内容..." @input="getstr" class="follow-up-input"></textarea>
				<button type="primary" @click="addFollowUpRecord" class="submit-btn">
					提交
				</button>
			</view>

			<!-- 历史跟进记录 -->
			<view class="follow-up-list">
				<view v-for="(record, index) in followUpRecords"  class="follow-up-item">
					<view class="follow-up-header">
						<text class="follow-up-time">{{record.createtime}}</text>
						<text class="follow-up-person"></text>
					</view>
					<text class="follow-up-content">{{record.desc}}</text>
				</view>
			</view>
		</view>



		
		
	</view>
</template>

<script>
	
	import { curl } from 'common/api.js';
		
		
	export default {
		data() {
			return {
				showAddFollowUp:0,
				merch:[],
				followUpRecords: [],
				intentLevels: [],
				str:''
			
			}
		},
		
		onLoad(ret){
			
			var that=this;
			this.id=ret.id;
			this.getmerchinfo();
			curl('index/getcate', {}).then((res) => {
				console.log(res.data);
				that.intentLevels=res.data
			});
			
			this.merchlistslog();
		},
		
		methods: {
			showAddFollowUp0(){
				this.showAddFollowUp=0;
			},
			showAddFollowUp1(){
				this.showAddFollowUp=1;
			},
			setlevel(ret){
				console.log(ret);
				var types=ret.currentTarget.dataset.id;
				var that=this;
				var id=this.id;
				
				curl('merchlist/setmerchlisttypes', {id:id,types:types}).then((res) => {
					console.log(res.data);
					that.getmerchinfo();
				
				});
				
				
			},
			
			getstr(ret){
				this.str=ret.detail.value;
			},
			//跟进详情
			merchlistslog(){
				
				var that=this;
				var id=this.id;
				
				curl('merchlist/merchlistslog', {id:id}).then((res) => {
					console.log(res.data);
					that.followUpRecords=res.data
				
				});
				
				
			},
			
			
			
			getmerchinfo(){
				
				var that=this;
				var id=this.id;
				
				curl('merchlist/getmymerchlist', {id:id}).then((res) => {
					console.log(res.data);
					that.merch=res.data
				});
				
				
			},
			
			//跟进
			addFollowUpRecord () {
				
			var that=this;
			var id=this.id;
			var str=this.str;
			
			  if (!str.trim()) {
				uni.showToast({
				  title: '请输入跟进内容',
				  icon: 'none'
				});
				return;
			  }
			  
		
			  
			  curl('merchlist/addmerchlistslog', {id:id,str:str}).then((res) => {
			  	console.log(res.data);
				that.showAddFollowUp=0;
				
				that.merchlistslog();
					
			  });
			  
			  
			  
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.page-container {
		padding: 20rpx;
		padding-bottom: 120rpx;
	}

	/* 客户信息卡片 */
	.info-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.info-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 0px;
	}

	.customer-name {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}

	.edit-icon {
		padding: 10rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.info-label {
		font-size: 28rpx;
		color: #666;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.info-value {
		font-size: 28rpx;
		color: #333;
	}

	/* 意向等级 */
	.intent-level {
		margin-top: 30rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.level-label {
		font-size: 28rpx;
		color: #666;
		margin-right: 20rpx;
	}

	.level-tags {
		display: flex;
		margin-top: 20rpx;
	}

	.level-tag {
		padding: 10rpx 20rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #fff;
		opacity: 0.6;
		background: #999;
	}

	.active {
		opacity: 1;
		transform: scale(1.05);
		background: #ff5500;
	}

	/* 跟进记录卡片 */
	.follow-up-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.section-header {
		width: 640rpx !important;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	/* 新增跟进 */
	.add-follow-up {
		margin-bottom: 30rpx;
	}

	.follow-up-input {
		width: 100%;
		height: 200rpx;
		padding: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.submit-btn {
		margin-top: 20rpx;
	}

	/* 跟进记录列表 */
	.follow-up-list {
		margin-top: 20rpx;
	}

	.follow-up-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	.follow-up-item:last-child {
		border-bottom: none !important;
	}

	.follow-up-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.follow-up-time {
		font-size: 24rpx;
		color: #999;
	}

	.follow-up-person {
		font-size: 24rpx;
		color: #666;
	}

	.follow-up-content {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}

	/* 编辑表单 */
	.edit-form {
		padding: 20rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.form-input {
		width: 100%;
		padding: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	/* 底部保存按钮 */
	.save-btn-container {
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		z-index: 100;
	}
</style>